<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>订单界面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/meanmenu.min.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <link rel="stylesheet" href="css/nivo-slider.css">
    <link rel="stylesheet" href="css/jquery-ui-slider.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.simpleLens.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.simpleGallery.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    <script src="layui/css/layui.css" media="all"></script>
</head>
<body>
<div id="header11"></div>

<div class="breadcurb-area">
    <div class="container">
        <ul class="breadcrumb">
            <li class="home"><a href="index.html">首页</a>
            <li>
            <li><a href="buyer-order.html">买家订单</a>
            <li>
        </ul>
    </div>
</div><!-- End Breadcurb Area -->
<div class="wishlist-area">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="cart-title">
                    <div class="col-md-12">
                        <input type="button" class="btn btn-primary btn-lg" onclick="orderMassage()" value="订单详情">
                        <input type="button" class="btn btn-primary btn-lg" onclick="payOrder()" value="订单支付">
                        <input type="button" class="btn btn-primary btn-lg" onclick="deleteOrder()" value="订单删除">
                        <input type="button" class="btn btn-primary btn-lg" onclick="orveOrder()" value="完成订单">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="chart-area">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="buyerOrder" class="chart-item table-responsive fix">
                    <table id="buyerTable">
                        <thead>
                        <tr>
                            <th><input type="checkbox"></th>
                            <th>订单号</th>
                            <th>商品名字</th>
                            <th>商品类型</th>
                            <th>成交价(元)</th>
                            <th>手续费(元)</th>
                            <th>创建时间</th>
                            <th>订单状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr style="color: black" v-for="(buyerOrder) in buyerOrders">
                            <td><input type="checkbox" name="oid" :value="buyerOrder.oid"></td>
                            <td>{{buyerOrder.orderNum}}</td>
                            <td>{{buyerOrder.gname}}</td>
                            <td>{{buyerOrder.cname}}</td>
                            <td>{{buyerOrder.transactionPerice}}</td>
                            <td>{{buyerOrder.charges}}</td>
                            <td>{{buyerOrder.buildTime}}</td>
                            <td>
                                <template v-if="buyerOrder.flage == '1'">
                                    <a style="color: black">未支付</a>
                                </template>
                                <template v-else-if="buyerOrder.flage == '2'">
                                    <a style="color: red">已过期</a>
                                </template>
                                <template v-else-if="buyerOrder.flage == '3'">
                                    <a>已完成</a>
                                </template>
                                <template v-else>
                                    <a>已支付</a>
                                </template>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!--底部-->
<div id="footer11"></div>

<script src="js/vendor/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/jquery.meanmenu.min.js"></script>
<script src="js/jquery-price-slider.js"></script>
<script type="text/javascript" src="js/jquery.simpleGallery.min.js"></script>
<script type="text/javascript" src="js/jquery.simpleLens.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>
<script src="js/dbclick.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="layui/layui.js"></script>
<script>
    //页面固定头尾
    $(function () {
        $('#header11').load("auction-head.html");
        $('#footer11').load('auction-footer.html');
    })

    //订单详情
    window.orderMassage = () => {
        let oids = $("input[name='oid']:checked");
        if (oids.length != 1) {
            alert("请选择一条数据");
            return;
        }
        let oid = oids.val();
        window.location.href = "buyerMassage.html?oid=" + oid;
    }

    //订单支付
    window.payOrder = () => {
        let oids = $("input[name='oid']:checked");
        if (oids.length != 1) {
            alert("请选择一条数据");
            return;
        }
        let oid = oids.val();
        window.location.href = "payment.html?oid=" + oid;
    }

    //订单完成
    window.orveOrder = () => {
        var oids = $("input[name='oid']:checked");
        if (oids.length != 1) {
            alert("请选择一条信息")
            return;
        } else {
            var oid = oids.val();
        }
        var flage = 4;
        $.ajax({
            url: "/web-order/order/overOrder",
            method: "post",
            data: {
                oid: oid,
            },
            success: function (result) {
                if (result.code == 200) {
                    alert("订单已完成");
                    location.reload();
                } else {
                    alert("系统错误，请联系管理员")
                    location.reload();
                }
            }
        })
    }

    //订单删除
    window.deleteOrder = () => {
        var oids = $("input[name='oid']:checked");
        if (oids.length != 1) {
            alert("请选择一条信息")
            return;
        } else {
            var oid = oids.val();
        }
        var flage = 0;
        $.ajax({
            url: "/web-order/order/deleteOrder",
            method: "post",
            data: {
                oid: oid,
                flage: flage
            },
            success: function (result) {
                if (result.code == 200) {
                    alert("删除成功");
                    location.reload();
                } else {
                    alert("系统错误，请联系管理员")
                    location.reload();
                }
            }
        })
    }

    //页面订单刷新
    window.showOrder = () => {
        $.ajax({
            url: "/web-order/order/buyerOrder",
            method: "get",
            data: {
                page: 1,
                limit: 10
            },
            success: function (result) {
                datas = result.data;
                orderLisr.buyerOrders = datas;
            }
        })
    }


    window.onload = function () {
        showOrder();
    }


    let orderLisr = new Vue({
        el: "#buyerOrder",
        data: {
            buyerOrders: {}
        },
    })

</script>
</body>
</html>
